<template>
  <div class="chart">
    <div v-if="widgetData.value.bgImg!==''" class="titleBox">
      <div class="img"><img :src="widgetData.value.bgImg"></div>
      <div class="title"><span>{{widgetData.value.title}}</span></div>
    </div>
    <div v-else class="titleBox">
      <!-- <i class="el-icon-picture"></i> -->
      <div class="title"><span>{{widgetData.value.title}}</span></div>
    </div>
    <div :style="{width:w+'px',height:(h-40)+'px'}" id="pieChart2"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['widgetData'],
  computed: {
    w() {
      let width = parseInt(this.widgetData.style.w / 4 * 3);
      return width
    },
    h() {
      let height = parseInt(this.widgetData.style.h / 4 * 3);
      return height
    }
  },
  data () {
    return {
      chartData: this.widgetData.value.chartData,
    }
  },
  watch: {},
  created () {},
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart(){
      let chartDom = document.getElementById("pieChart2");
      let chart = this.$echarts.init(chartDom);

      const xData = this.chartData.xData;
      const yData1 = this.chartData.yData1;
      const yData2 = this.chartData.yData2;
      const yData3 = this.chartData.yData3;

      let colors = [
        ["#FFDE00", "rgba(255, 216, 0, 0.03)", 'rgba(255, 198, 0, 0.86)'],
        ["#00FFA0", "rgba(2, 255, 157, 0.03)", 'rgba(11, 255, 160, 0.86)'],
        ["#00D7FF", "rgba(0, 180, 255, 0.03)", 'rgba(0, 216, 255, 0.86)'],
      ];

      let option = {
        tooltip: {
          show: true,
          trigger: "item",
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "rgba(16, 123, 184, .52)", //设置背景颜色
          borderColor: "rgba(255, 255, 255, 0)",
          confine: false,
          formatter: function (params) {
            var str = params.seriesName + "：" + params.value + '%';
            return str;
          },
        },
        title:[
          {
            text: xData[0],
            left: 0 * 30 + 20 + "%",
            top: '75%',
            textAlign: "center",
            textStyle: {
              fontWeight: "400",
              fontSize: "18",
              color: '#FFFFFF',
              textAlign: "center",
            },
          },
          {
            text: xData[1],
            left: 1 * 30 + 20 + "%",
            top: '75%',
            textAlign: "center",
            textStyle: {
              fontWeight: "400",
              fontSize: "18",
              color: '#FFFFFF',
              textAlign: "center",
            },
          },
          {
            text: xData[2],
            left: 2 * 30 + 20 + "%",
            top: '75%',
            textAlign: "center",
            textStyle: {
              fontWeight: "400",
              fontSize: "18",
              color: '#FFFFFF',
              textAlign: "center",
            },
          },
        ],
        series:[
          {
            name: xData[0],
            type: "pie",
            center: [0 * 30 + 20 + "%", "40%"],
            radius: ['60%', '50%'],
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: yData1[0],
                label: {
                  show: true,
                  position: 'center',
                  fontSize: 13,
                  fontWeight: 'bold',
                  formatter: function (o) {
                    return (`{value|${yData1[0]}%}`);
                  },
                  rich: {
                    value: {
                      color: colors[0][0],
                      fontSize: 26,
                      fontWeight: 'bold',
                    }
                  }
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: '#C9C9C9',
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: colors[0][1] },
                      { offset: 1, color: colors[0][2] }
                    ],
                  },
                },
                labelLine: {
                  show: false,
                },
              },
              {
                name: "",
                value: yData2[0] - yData1[0],
                label: {
                  show: false,
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: '#C9C9C9',
                  color: 'rgba(64, 158, 255, 0.1)',
                },
              },
            ],
          },
          {
            name: xData[1],
            type: "pie",
            center: [1 * 30 + 20 + "%", "40%"],
            radius: ['60%', '50%'],
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: yData1[1],
                label: {
                  show: true,
                  position: 'center',
                  fontSize: 13,
                  fontWeight: 'bold',
                  formatter: function (o) {
                    return (`{value|${yData1[1]}%}`);
                  },
                  rich: {
                    value: {
                      color: colors[1][0],
                      fontSize: 26,
                      fontWeight: 'bold',
                    }
                  }
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: '#C9C9C9',
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: colors[1][1] },
                      { offset: 1, color: colors[1][2] }
                    ],
                  },
                },
                labelLine: {
                  show: false,
                },
              },
              {
                name: "",
                value: yData2[1] - yData1[1],
                label: {
                  show: false,
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: '#C9C9C9',
                  color: 'rgba(64, 158, 255, 0.1)',
                },
              },
            ],
          },
          {
            name: xData[2],
            type: "pie",
            center: [2 * 30 + 20 + "%", "40%"],
            radius: ['60%', '50%'],
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: yData1[2],
                label: {
                  show: true,
                  position: 'center',
                  fontSize: 13,
                  fontWeight: 'bold',
                  formatter: function (o) {
                    return (`{value|${yData1[2]}%}`);
                  },
                  rich: {
                    value: {
                      color: colors[2][0],
                      fontSize: 26,
                      fontWeight: 'bold',
                    }
                  }
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: '#C9C9C9',
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: colors[2][1] },
                      { offset: 1, color: colors[2][2] }
                    ],
                  },
                },
                labelLine: {
                  show: false,
                },
              },
              {
                name: "",
                value: yData2[2] - yData1[2],
                label: {
                  show: false,
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: '#C9C9C9',
                  color: 'rgba(64, 158, 255, 0.1)',
                },
              },
            ],
          },
        ],
      };

      // 大屏适配
      window.addEventListener("resize", function () {
        chart.resize();
      });
      chart.setOption(option);
    }
  },
}
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
  span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .titleBox{
    width: 100%;
    height: 40px;
    position: relative;
    .img{
      width: 100%;
      height: 40px;
      position: absolute;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .title{
      position: absolute;
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 13px;
      color: #FFFFFF;
      background-color: #000;
      font-size: 18px;
    }
    .el-icon-picture{
      width: 100%;
      height: 40px;
      position: absolute;
      font-size: 3.125rem;
      background: #ffffff;
      color: #c1c1c1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>